<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="head">
		<title>地图展示</title>
		<link href='mapView.css' rel='stylesheet' />
		<link href='/resources/bootstrap/css/bootstrap-responsive.min.css' rel='stylesheet' />
		<link href='/resources/plugins/datatables/dataTables.bootstrap.css' rel='stylesheet' />
		<link href='/resources/bootstrap/css/bootstrap-datetimepicker.min.css' rel='stylesheet' />
		<link href='/resources/css/panelTablesUtil.css' rel='stylesheet' />
		<link href='/resources/css/liMarquee.css' rel='stylesheet' />
		<link href='/resources/css/map/map.css' rel='stylesheet' />
		<script src="/resources/js/jquery.js"></script>
		<script src="/resources/plugins/SuperMap/libs/SuperMap.Include.js"></script>
		<script src="/resources/plugins/SuperMap/graph/Bar3D.js"></script>
		<script src="/resources/plugins/SuperMap/graph/Pie.js"></script>
		<script src="/resources/js/jquery.liMarquee.js"></script>
	</ui:define>
	<ui:define name="content">
		<div id="map" class="full-content">
            <div class="marquee" id="marquee" style="display: none;"></div>
            <!-- 地图左上角展示区 -->
            <div id="leftTopDiv" class="box box-solid bg-light-blue-gradient col-md-3 left_top no-padding">
                <div class="box-header with-border">
                    <h4 id="leftTopDivTitle"></h4>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
                            style="margin-right: 5px;" data-original-title="Collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div id="leftTopDivBody" class="box-body"></div>
            </div>
            <div id="hoverDiv" class="hoverDiv"></div>
            <!-- 地图下方时间线 -->
            <div id="div_timeline" class="timeline-box" style="display: none;">
                <h3 id="title_timeline" class="font-family:SimHei" style="color: white"></h3>
                <div id="chart_timeline" style="height: 50px;"></div>
            </div>
            <!-- 右键展示菜单 -->
            <div id="hiddenDiv" style="display: none;"></div>
            <div id="faultAlarmDiv"></div>
            <div class="bottom-title" id="bottom_title" style="display: none;"></div>
            <!-- 地图下方时间线 -->
            <div id="bottomDiv" style="display: none; height: 116px; bottom: 0px; width: 100%; position: absolute; z-index: 2000;">
                <div style="background-image: url(/resources/img/typhoon/lishi_bg.png); clear: both; height: 116px; width: 100%; overflow: hidden;">
                    <div style="height: 3px; background: #3c8dbc; clear: both;"></div>
                    <div id="bottomTimeline" style="height: 100px; width: 100%; display: inline; position: absolute; z-index: 4;"></div>
                    <div style="height: 16px; background: #3c8dbc; position: absolute; bottom: 0; width: 100%; z-index: 0;"></div>
                </div>
            </div>           
            <!-- 地图右上角工具栏 -->
            <div class="btn-group toolbar-box ">
                <button type="button" title="测距" onclick="distanceMeasure()" class="btn btn-default btn-flat">
                    <img src="/resources/img/map/ruler.png"></img>
                </button>
                <button type="button" title="矩形查询" onclick="drawQueryRectangle()" class="btn btn-default btn-flat">
                    <i class="fa fa-clone"></i>
                </button>
                <button type="button" title="清除" onclick="clearAll(true)" class="btn btn-default btn-flat">
                    <i class="fa fa-repeat"></i>
                </button>
                <button type="button" title="擦除搜索结果" onclick="clearSearchObj();" class="btn btn-default btn-flat">
                    <i class="fa fa-eraser" />
                </button>
            </div>
            <!-- 地图右上角搜索栏及按钮 -->
            <div class="input-group margin search-box">
                <input type="text" id="input_search" class="form-control" data-provide="typeahead" data-items="100" />
                <span class="input-group-btn">
                    <button type="button" id="btn_search" onclick="searchObj();" class="btn btn-info btn-flat">
                        #{lang.souSuoAnNiu}
                    </button>
                </span>
            </div>
            <!-- 地图右上角详情展示区 -->
            <div id="affectObjDiv" class="weatherBox box box-success" style="display: none; padding-left: 8px; background-color: white;"></div>
            <!-- 地图区 -->
        </div>
        <div id="modal"/>
        <span id="hiddenSpan" style="display: none;" />
	</ui:define>
	<ui:define name="contentend">
        <!-- 插件 -->
        <script src="/resources/plugins/echarts/echarts.min.js"></script>
        <script src="/resources/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
        <script src="/resources/plugins/jQueryUI/jquery-ui.js"></script>
        <script src="/resources/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
        <script src="/resources/plugins/snapsvg/snap.svg.js"></script>

        <!-- util -->
        <script src="/resources/js/array-util.js"></script>
        <script src="/resources/js/tables/mytable.js"></script>
        <script src="/resources/js/mycharts/timeline.js"></script>
        <script src="/resources/js/mycharts/categoryBarChart.js"></script>
        <script src="/resources/js/mycharts/pieChart.js"></script>
        <script src="/resources/js/tables/panelTablesUtil.js"></script>
        <script src="/resources/js/mypopup/popup.js"></script>
        <script src="/resources/js/objectId.js"></script>
        <script src="/resources/js/supermapUtil.js"></script>
        <script src="/resources/js/date-util.js"></script>

        <!-- 业务 -->
        <script src="/ui/map/mapCluster.js"></script>
        <script src="/ui/map/faultAlarmMan.js?v=0.0.2"></script>
        <script src="/ui/map/protectionActRatio.js"></script>
        <script src="/ui/map/weatherManager.js"></script>
        <script src="/ui/map/weatherDiscMan.js"></script>
        <script src="/ui/map/faultDiscMan.js"></script>
        <script src="/ui/map/faultChartMan.js"></script>
        <script src="mapView.js?v=0.0.1"></script>
        <script src="/ui/map/riskEvaluate.js"></script>
        <script src="/ui/map/dailyFaultMan.js?v=0.0.3"></script>
        <script src="/ui/map/weatherHistoryMan.js"></script>
        <script src="/ui/map/protectionStatusMan.js"></script>
        <script src="/ui/map/typhoonDiscMan.js?v=0.0.0"></script>
        <script src="/ui/map/typhoonForecastMan.js?version=0.0.0"></script>
        <script src="/ui/map/riskAlarmMan.js"></script>
        <script src="/ui/map/protectionStatusEvaluation.js"></script>
        <script src="/ui/map/realTimeAnimator.js"></script>
        <script src="/ui/map/typhoonSvg/typhoonTimeLine.js"></script>
        <script src="/ui/map/iceWarningManager.js?version=0.0.0"></script>
        <script src="/ui/map/thunderWarningManager.js"></script>
        <script src="/ui/map/travelingFaultDisc.js"></script>
        <script>
            var localeTitle = {
                    mingXi:'#{lang.mingXi}',
                    search:'#{lang.souSuoAnNiu}',
                    ChaXunShiJianBuChaoGuo:'#{lang.ChaXunShiJianBuChaoGuo}',
                    Tian:'#{lang.Tian}',
                    ChaXunKaiShiShiJianBuChaoGuoJieShuShiJian:'#{lang.ChaXunKaiShiShiJianBuChaoGuoJieShuShiJian}',
                    ChaXunShiJianBuBiaoZhun:'#{lang.ChaXunShiJianBuBiaoZhun}',
                    ZuoTian:'#{lang.ZuoTian}',
                    QianSanTian:'#{lang.QianSanTian}',
                    QianSiTian:'#{lang.QianSiTian}',
                    QianBaTian:'#{lang.QianBaTian}',
                    daily:{
                     BaoHuRiBao : '#{lang.BaoHuRiBao}',
                     GuZhangRiBao : '#{lang.GuZhangRiBao}',
                     BaoHuQueXian : '#{lang.BaoHuQueXian}',
                     BaoHuQueXianJiChuLi : '#{lang.BaoHuQueXianJiChuLi}',
                     BaoHuJianXiu : '#{lang.BaoHuJianXiu}',
                     QuanBu :'#{lang.QuanBu}',
                     YiWanGong : '#{lang.YiWanGong}',
                     JinXingZhong : '#{lang.JinXingZhong}',
                     DaiKaiGong : '#{lang.DaiKaiGong}',
                     JieZhi : '#{lang.JieZhi}',
                     TongDaoJianShi : '#{lang.TongDaoJianShi}',
                     BaoHuTongDaoZhongDuan : '#{lang.BaoHuTongDaoZhongDuan}',
                     BaoHuTongDaoPinFanZhongDuan : '#{lang.BaoHuTongDaoPinFanZhongDuan}', 
                     ShuangTongDaoZhongDuan : '#{lang.ShuangTongDaoZhongDuan}',
                     BaoHuFengXian : '#{lang.BaoHuFengXian}',
                     SheBeiQiDong : '#{lang.SheBeiQiDong}',
                     ZhuanXiangHuiBao : '#{lang.ZhuanXiangHuiBao}'
                     },
                    fault:{
                    GuZhangSheBei:'#{lang.GuZhangSheBei}',
                    GuZhangShiJian:'#{lang.GuZhangShiJian}',
                    GuZhangLeiXing:'#{lang.GuZhangLeiXing}',
                    WuGuZhangFaSheng:'#{lang.WuGuZhangFaSheng}',
                    ZhuWangGongFaSheng:'#{lang.ZhuWangGongFaSheng}',
                    QiTiaoZhaShiJian:'#{lang.QiTiaoZhaShiJian}'
                    },
                    defect:{
                    ChangZhanMingCheng:'#{lang.ChangZhanMingCheng}',
                    BaoHuMingCheng:'#{lang.BaoHuMingCheng}',
                    BaoHuTuiChuShiJian:'#{lang.BaoHuTuiChuShiJian}',
                    WuQueXianJiLu:'#{lang.WuQueXianJiLu}'
                     },
                    channel:{
                        XianLu:'#{lang.XianLu}',
                        BaoHu:'#{lang.BaoHu}',
                        PinFanCiShu:'#{lang.PinFanCiShu}',
                        ShiJian:'#{lang.ShiJian}',
                        WuTongXinZhongDuanYiChang:'#{lang.WuTongXinZhongDuanYiChang}',
                        WeiFaShengBaoHuTongDaoPinFanZhongDuan:'#{lang.WeiFaShengBaoHuTongDaoPinFanZhongDuan}',
                        WeiFaShengShuangTongDaoTongShiZhongDuan:'#{lang.WeiFaShengShuangTongDaoTongShiZhongDuan}',
                        BaoHuTongXiZhongDuanFaSheng:'#{lang.BaoHuTongXiZhongDuanFaSheng}',
                        Ci:'#{lang.Ci}',
                        GongJi:'#{lang.GongJi}',
                        XiaoShi:'#{lang.XiaoShi}'
                    }
            }
            $('#btnBoxLeft').on('hidden.bs.collapse', function () {
                    $('#myLogo').attr('src', 'resources/img/message/mylogo.png');
                    $('#myLogo').css('width', 20);
                    $('#myLogo').css('height', 20);
                    $('#collapseBtn').removeClass('btn-collapse');
                    $('#collapseBtn').addClass('btn-collapse-min');
            })
            function openDialog(dlgParam){
                var url = dlgParam.url;
                var contentWidth = dlgParam.width;
                var contentHeight = dlgParam.height;
                var urlparams = dlgParam.urlParams;
                if(typeof urlparams == 'string'){
                    urlparams=JSON.parse(urlparams);
                }
                if(urlparams){
                    if(urlparams.length > 0){
                        var up = "";
                        for(var i in urlparams){
                            if(i == 0){
                                up += (urlparams[i].name+"="+urlparams[i].value);
                            }else{
                                up += ("&amp;"+urlparams[i].name+"="+urlparams[i].value);
                            }
                        }
                        url += "?"+up;
                    }
                }
                MyModal.showModal(url,contentWidth,contentHeight);
            }
            //TODO 
            //1.判断map是否有，或者判断是否报错           
            //2.如果有，调用mapforserver.js中的init();
            //3.如果没有，启动异常处理机制，调用mapforserverException.js中的加载方法          
            init(); 
            document.onkeydown = function (e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which;
                if (code == 13) {
                    var str = $("#input_search").val();
                    if(str.length > 0)
                        $("#btn_search").click();
                }
            }
            $(function(){
                if(localStorage.getItem('enlarge')){
                    var url = '/resources/css/map/enlarge/map-enlarge-font.css';
                    var head = document.getElementsByTagName('head')[0];
                    var link = document.createElement('link');
                    link.type='text/css';
                    link.rel = 'stylesheet';
                    link.href = url;
                    link.id = "enlargeCss";
                    head.appendChild(link);
                }
                showNewEquipmentAlarm();
            });
        </script>
    </ui:define>
</ui:composition>
